<template>
  <div>
    <!-- 作品信息 -->
    <div class="commodity">
      <el-form :model="queryParams" size="small" :inline="true" class="search">
        <el-form-item class="form" label="作品名称">
          <el-input v-model="searchFome.title" />
        </el-form-item>
        <el-form-item class="form" label="类别">
          <el-select v-model="searchFome.material" placeholder="请选择作品类别">
            <el-option label="油画" value="0"></el-option>
            <el-option label="水彩画" value="1"></el-option>
            <el-option label="素描" value="2"></el-option>
            <el-option label="版画" value="3"></el-option>
            <el-option label="雕塑" value="4"></el-option>
            <el-option label="其他" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            size="small"
            type="success"
            plain
            @click="Search()"
          >
            搜索
          </el-button>
          <el-button
            icon="el-icon-delete"
            size="small"
            type="primary"
            plain
            @click="reset()"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div class="commodity_ul">
        <div
          class="commodity_ul_li"
          v-for="(i, index) in this.list"
          :key="index"
          @click="router_id(i)"
        >
          <div class="commodity_ul_li_info">
            <div class="img">
              <img :src="'http://127.0.0.1:8000' + i.image" alt="" />
            </div>

            <div class="detail">
              <p>
                艺术家:<span>{{ i.artist.real_name }}</span>
              </p>

              <p>
                标题:<span>{{ i.title }}</span>
              </p>

              <p>
                描述:<span>{{ i.description }}</span>
              </p>

              <p>
                价格:<span>{{ i.price }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <el-empty
        v-if="this.Empty"
        description="暂时还没有宝贝哦"
        :image-size="250"
        style="
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        "
      ></el-empty>
    </div>
  </div>
</template>

<script>
import { getartworks } from "@/api/artworks";
export default {
  data() {
    return {
      list: [],
      Empty: true,
      // 查询参数
      queryParams: {
        title: "",
        real_name: "",
        material: "",
      },
      // 搜索
      searchFome: {
        title: "",
        real_name: "",
        material: "",
      },
      originalItemList: null,
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      getartworks().then((res) => {
        console.log(res);
        this.list = res.results;
        this.Empty = false;
      });
    },
    router_id(i) {
      this.$router.push({ path: "/ItemDetails", query: { id: i.id } });
      console.log(i.id);
    },
    // 搜索
    Search() {
      // 备份原始出库列表
      if (!this.originalItemList) {
        this.originalItemList = [...this.list];
      }

      // 过滤项目列表
      this.list = this.originalItemList.filter((item) => {
        let match = true;
        for (let key in this.searchFome) {
          const searchValue = this.searchFome[key]; // 搜索条件
          const itemValue = item[key]; // 表格数据
          if (
            typeof searchValue === "string" &&
            typeof itemValue === "string"
          ) {
            // 字符串
            if (!itemValue.includes(searchValue)) {
              match = false;
              break;
            }
          } else if (searchValue !== "" && typeof itemValue === "boolean") {
            // 布尔型
            if (JSON.parse(searchValue) !== itemValue) {
              match = false;
              break;
            }
          } else if (searchValue !== "") {
            // 数值型
            if (Number(searchValue) !== itemValue) {
              match = false;
              break;
            }
          }
        }
        return match;
      });
    },
     // 重置
    reset() {
      this.searchFome = {
        item_name: "",
        specifications: "",
        category: "",
        brand: "",
      };
      this.getlist();
      return;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/commodity.less";
.search {
  margin: 20px 0;
}
</style>
